<template>
  <div class="account">
    <div style="margin-right: 22%;">
      <div class="account-item">
        <div class="item-key">手机号码</div>
        <div class="item-value">还没绑定手机号？去绑定</div>
      </div>
      <div class="account-item">
        <div class="item-key">用户名</div>
        <div class="item-input">
          <input style="border: none; width: 200px" type="text" /><span
            >修改</span
          >
        </div>
      </div>
      <div class="account-item">
        <div class="item-key">推荐人账号ID</div>
        <div class="item-input">
          <input style="border: none; width: 200px" type="text" /><span
            >确定</span
          >
        </div>
      </div>
    </div>
    <div>
      <div class="account-item">
        <div class="item-key">注册时间</div>
        <div class="item-value">2024-10-11</div>
      </div>
      <div class="account-item">
        <div class="item-key">账号ID</div>
        <div class="item-value">8061977</div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.account {
  display: flex;
  align-items: flex-start;
  .account-item {
    font-size: 14px;
    margin-bottom: 40px;
    .item-key {
      font-family: MicrosoftYaHei;
      color: #999;
      letter-spacing: 0;
      margin-bottom: 20px;
    }
    .item-value {
      list-style: none;
      text-decoration: none;
      color: #666;
    }
    .item-input {
      width: 260px;
      border: none;
      border-bottom: 1px solid #ddd;
      -webkit-transition: all 0.6s;
      transition: all 0.6s;
      font-size: 14px;
      color: #4a90e2;
      cursor: pointer;
    }
  }
}
</style>
